import React from 'react';
import { Link } from 'react-router-dom';
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import UserService from 'service/UserService.jsx';
const userService = new UserService();

class NavTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: mUtil.getStorage('userInfo').username || '',
    }
  }
  onLogout() {
    userService.logout()
      .then(res => {
        mUtil.removeStorage('userInfo');
        // this.props.history.push('/login');
        location.href = '/login';
      }, errMsg => mUtil.errorTips(errMsg));
  }

  render() {
    return (
      <div className="navbar navbar-default top-navbar">
        <div className="navbar-header">
          <Link className="navbar-brand" to="index.html"><b>HAPPY</b>HanYi</Link>
        </div>

        <ul className="nav navbar-top-links navbar-right">
          <li className="dropdown">
            <a className="dropdown-toggle" href="javascript:;" >
              <i className="fa fa-user fa-fw"></i>
              {
                this.state.username
                  ? <span>欢迎，{this.state.username}</span>
                  : <span>欢迎您</span>
              }
              <i className="fa fa-caret-down"></i>
            </a>
            <ul className="dropdown-menu dropdown-user">
              <li>
                <a onClick={() => this.onLogout()} style={{ cursor: 'pointer' }}>
                  <i className="fa fa-sign-out fa-fw"></i>
                  <span>退出登录</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    );
  }
}

export default NavTop;